<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>Buus</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<link href="estilo.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="maps.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="funcoes.js"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application. 
	 To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="/phonegap.js" type="text/javascript"></script>
</head> 
<body> 

<div data-role="page" id="page">
  <div data-role="header">
    <a href="#" data-icon="plus" data-iconpos="notext"></a>
		<h1>Buus</h1>
    <a href="#" data-icon="" data-iconpos="notext"></a>
	</div>
    <input type="search"  style="margin-left:2%; width:96%; 										background-color:white;" id="search" placeholder="Search" />
     

	<div data-role="content">	
		<ul data-role="listview">
        
			<li> <a href="#map-page">            
            <div class="linha_numero"> 315 </div> 
            <div class="tempo_estimado"> 5 min</div> 
            <div class="linha_trajeto"> Recreio - Central </div> 
			<br>
            <div class="endereco_ponto"> Av. das Américas, 6540 
            </div>             
            </a></li>
            
            <li><a href="#detalhe2">
            <div class="linha_numero"> 315 </div> 
            <div class="tempo_estimado"> 5 min</div> 
            <div class="linha_trajeto"> Recreio - Central </div> 
			<br>
            <div class="endereco_ponto"> Av. das Américas, 6540 
            </div>
            </a></li>
            
			<li><a href="#detalhe3">
            <div class="linha_numero"> 315 </div> 
            <div class="tempo_estimado"> 5 min</div> 
            <div class="linha_trajeto"> Recreio - Central </div> 
            
			<br>
            <div class="endereco_ponto"> Av. das Américas, 6540 
            </div>
            </a></li>
            
            <li><a href="#ponto_onibus">
            <div class="linha_trajeto"> Pontos de Ônibus </div> 
            </a></li>
	  </ul>		
  </div>
	<div data-role="footer" data-position="fixed">
    <div class="alarme_footer">
        <a href="#alarme"><img src="imgs/alarme_icon.png" /></a>
        <br>
        Alarmes
    </div>
		
	</div>
</div>

<div data-role="page" id="map-page">
	<div data-role="header">
		<h1>Buus</h1>
	</div>
	<div data-role="content" "id="map-canvas" style="font-weight:bold;">	
		<div class="linha_numero_detalhe"> 315 </div> 
        <div class="linha_trajeto_detalhe"> Recreio - Central 
        </div> 
        <br><br>
        <div class="tempo_estimado_detalhe"> 5 min</div> 
	</div>
    

	<div data-role="footer" data-position="fixed" >
		<h4></h4>
	</div>
</div>

<div data-role="page" id="detalhe2">
	<div data-role="header">
		<h1>Buus</h1>
	</div>
	<div data-role="content" style="font-weight:bold;">	
		<div class="linha_numero_detalhe"> 315 </div> 
        <div class="linha_trajeto_detalhe"> Recreio - Central 
        </div> 
        <br><br>
        <div class="tempo_estimado_detalhe"> 5 min</div> 
	</div>
    
    <div class="mapa_detalhe">
        <img src="https://maps.googleapis.com/maps/api/staticmap?center=Av. das Américas, 6540&amp;zoom=15&amp;size=288x200&amp;markers=Av. das Américas, 6540&amp;sensor=false"
        width="288" height="200" border="1px">
        </div>

	<div data-role="footer" data-position="fixed">
		<h4></h4>
	</div>
</div>

<div data-role="page" id="detalhe3">
	<div data-role="header">
		<h1>Buus</h1>
	</div>
	<div data-role="content" style="font-weight:bold;">	
		<div class="linha_numero_detalhe"> 315 </div> 
        <div class="linha_trajeto_detalhe"> Recreio - Central 
        </div> 
        <br><br>
        <div class="tempo_estimado_detalhe"> 5 min</div> 
	</div>
    
    <div class="mapa_detalhe">
        <img src="https://maps.googleapis.com/maps/api/staticmap?center=Av. das Américas, 6540&amp;zoom=15&amp;size=288x200&amp;markers=Av. das Américas, 6540&amp;sensor=false"
        width="288" height="200" border="1px">
        </div>

	<div data-role="footer" data-position="fixed">
		<h4></h4>
	</div>
</div>

<!-- Tela de troca do ponto de ônibus -->
<div data-role="page" id="ponto_onibus">
	<div data-role="header">
		<h1>Buus</h1>
	</div>
    <input type="search"  style="margin-left:2%; width:93%; 										background-color:white;" name="textinput" id="textinput" placeholder="Digite um endereço."  />
	<div data-role="content">	
		 <div id="place_icon" style="float:left;">
        	<img src="imgs/place_icon_cinza.png">
        </div>
        <div style="margin-left:7%; font-size:.9em; padding-top:1%;">
        	Av. das Américas 6540. Barra da Tijuca.
        </div>         
	</div>    
    <div class="mapa_detalhe">
        <img src="https://maps.googleapis.com/maps/api/staticmap?center=Av. das Américas, 6540&amp;zoom=15&amp;size=288x200&amp;markers=Av. das Américas, 6540|Av. das Américas 6240|Av. das Américas 6840|Rua General Renato|Rua Emílio Wolf, 500&amp;sensor=false" width="288" height="200">    
        </div>

	<div data-role="footer">
		<h4></h4>
	</div>
</div>

<div data-role="page" id="alarme">
<div data-role="header">
    <a href="#" data-icon="back" data-iconpos="notext"></a>
		<h1>Buus</h1>
        <a href="#novo_alarme" data-icon="plus" data-iconpos="notext"></a>
	</div>
	<div data-role="content" style="font-weight:bold;">	
		<ul data-role="listview" id="lista_alarme" > 
          </ul>
           
    
	</div>
<div data-role="footer" data-position="fixed" >
		<h4></h4>
	</div>
</div>
<div data-role="page" id="novo_alarme">
	<div data-role="header">
    <a href="#alarme" data-icon="back" data-iconpos="notext"></a>
		<h1>Buus</h1>
        <a href="#" data-icon="check" data-iconpos="notext" id="enviar"></a>
	</div>
  <div data-role="content" style="font-weight:bold;">
	  <div data-role="fieldcontain">
	    
	    <input name="textinput2" placeholder="Linha de ônibus"type="text" id="linha"  />
      
	    <input name="textinput3" type="text" id="hora" value=""placeholder="A partir da hora"   />
      </div>
	 
      <div data-role="fieldcontain">
	    <label for="textinput4">Dias da semana</label>
	    
      </div>
     
      
            <fieldset data-role="controlgroup" data-type="vertical">
                <legend>
                </legend>
                <input name="checkbox1" id="c1" type="checkbox">
                <label for="c1">
                    Segunda-feira
                </label>
            </fieldset>
            
            <fieldset data-role="controlgroup" data-type="vertical">
                <legend>
                </legend>
                <input name="checkbox1" id="c2" type="checkbox">
                <label for="c2">
                    Terça-feira
                </label>
            </fieldset>
            
            <fieldset data-role="controlgroup" data-type="vertical">
                <legend>
                </legend>
                <input name="checkbox1" id="c3" type="checkbox">
                <label for="c3">
                    Quarta-feira
                </label>
            </fieldset>
            
            <fieldset data-role="controlgroup" data-type="vertical">
                <legend>
                </legend>
                <input name="checkbox1" id="c4" type="checkbox">
                <label for="c4">
                    Quinta-feira
                </label>
            </fieldset>
            
            <fieldset data-role="controlgroup" data-type="vertical">
                <legend>
                </legend>
                <input name="checkbox1" id="c5" type="checkbox">
                <label for="c5">
                    Sexta-feira
                </label>
            </fieldset>
        
        
            <fieldset data-role="controlgroup" data-type="vertical">
                <legend>
                </legend>
                <input name="checkbox3" id="c6" type="checkbox">
                <label for="c6">
                    Sabado
                </label>
            </fieldset>
        
        
            <fieldset data-role="controlgroup" data-type="vertical">
                <legend>
                </legend>
                <input name="checkbox4" id="c7" type="checkbox">
                  <label for="c7">
                  Domingo
                </label>
            </fieldset>
          
  </div>
    
   

	<div data-role="footer" data-position="fixed">
		<h4>Excluir</h4>
	</div>
</div>

</body>
</html>